<template>
  <div class="navbox">
    <!-- item的内容 -->
    <div
      class="sidenavitem"
      ref="sidenavitem"
      @click="clickOpens"
      :style="activeStyle"
    >
      <slot name="text"></slot>

      <div v-if="haveItem">
        <i class="el-icon-arrow-down" style="flex: 1" :style="iconStyle"></i>
      </div>
    </div>

    <!-- 二级item -->
    <item-box :isOpen="clickOpen" v-if="haveItem">
      <slot name="item"></slot>
    </item-box>
  </div>
</template>

<script>
import ItemBox from "./ItemBox.vue";

export default {
  name: "SideNavItem",
  data() {
    return {
      clickOpen: false,
      queryArr: [],
    };
  },
  components: {
    ItemBox,
  },
  props: {
    activeColor: {
      type: String,
      default: "#409EFF",
    },
    query: {},
  },
  created() {
    //把每个item的query参数放到一个数组
    for (let i in this.query) {
      this.queryArr.push(this.query[i].query);
    }
  },
  computed: {
    activeStyle() {
      return this.isActive ? { color: this.activeColor } : {};
    },
    isActive() {
      let result = this.queryArr.some((item) => {
        return item == this.$route.params.sequence;
      });
      return result;
    },
    haveItem() {
      if (this.queryArr.length != 0) {
        return true;
      } else {
        return false;
      }
    },
    iconStyle() {
      return this.clickOpen
        ? {
            transform: "rotate(-450deg)",
          }
        : {
            transform: "rotate(0deg)",
          };
    },
  },
  methods: {
    clickOpens() {
      this.clickOpen = !this.clickOpen;
    },
  },
  watch: {
    isActive: {
      immediate: true,
      deep: true,
      handler(newValue) {
        newValue ? (this.clickOpen = true) : (this.clickOpen = false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.sidenavitem {
  margin-bottom: 5px;
  margin-top: 5px;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10%;
  padding-right: 10%;
  cursor: pointer;
  transition: all 0.1s;
  @include sidenav-color($color-blackgray-light);
  font-size: 1rem;
  border-radius: 5px;
  transform-style: preserve-3d;
}
.sidenavitem i {
  transition: transform 0.3s ease;
}
span {
  letter-spacing: 0rem !important;
}
.sidenavitem:hover {
  @include sidenav-color-active($bgcolor-gray);
}
.el-icon-arrow-right,
.el-icon-arrow-down {
  font-weight: bold;
}
span {
  flex: 1;
}
</style>
